<script setup>
import {useRoute} from 'vue-router'
import {reactive,ref} from "vue";
import {get, post} from "@/utils/request.js";
import {showSuccessToast} from "vant";
const route = useRoute()
//params
const processId = route.query.id;

let data = reactive({
  "processId": processId,
  "productName": '卡子',
  "productCategory": '',
  "productColor": '',
  "weight": '',
  "purchaser": '',
  "director": '',
  "recordType": '记账',
  purchasers: [],
  directors: [],
  originData:{

  }
})
get("/api/process/detail/"+processId)
    .then((res) => {
      data.originData = res.data;
    })


// 经办人
const showDirector = ref(false);
const onDirectorsConfirm = ({selectedOptions}) => {
  showDirector.value = false;
  data.director = selectedOptions[0].text;
};
let directorColumn = []
get("/api/book/listDirector")
    .then(res => {
      data.directors = res.data;
      for (const item of res.data) {
        directorColumn.push({
          text: item,
          value: item,
        })
      }
    })


const onSubmit = (values) => {
  console.log(values)
  post('/api/process/addDetail', data)
      .then(res => {
        showSuccessToast("添加成功");
        history.back();
      })

};
const onClickLeft = () => history.back();

</script>

<template>
  <div is="add-process-detail">
    <div class="title">
      <van-nav-bar title="归还" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    </div>

    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              v-model="data.originData.productName"
              name="产品"
              label="产品"
              placeholder="产品"
              :rules="[{ required: true, message: '产品' }]"
              disabled
          >
            <template #input>
              <van-radio-group v-model="data.originData.productName" direction="horizontal" disabled>
                <van-radio name="卡子" >卡子</van-radio>
                <van-radio name="钩子" >钩子</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-model="data.originData.productColor"
              name="产品颜色"
              label="产品颜色"
              placeholder="产品颜色"
              :rules="[{ required: true, message: '请填写产品颜色' }]"
              disabled
          >
            <template #input>
              <van-radio-group v-model="data.originData.productColor" direction="horizontal" disabled>
                <van-radio name="黑">黑</van-radio>
                <van-radio name="白">白</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-model="data.originData.productCategory"
              name="型号"
              label="型号"
              placeholder="型号"
              :rules="[{ required: true, message: '请填写型号' }]"
              disabled
          >
            <template #input>
              <van-radio-group v-model="data.originData.productCategory" direction="horizontal" disabled>
                <van-radio name="大">大</van-radio>
                <van-radio name="中">中</van-radio>
                <van-radio name="小">小</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-model="data.originData.purchaser"
              name="加工商"
              label="加工商"
              placeholder="加工商"
              left-icon="contact-o"
              :rules="[{ required: true, message: '请填写加工商' }]"
              disabled
          >
          </van-field>
          <van-field
              name="归还重量"
              label="归还重量"
              placeholder="归还重量"
              v-model="data.weight"
              :rules="[{ required: true, message: '请填写归还重量' }]"
          >
            <template #extra>
              <span>KG</span>
            </template>
          </van-field>

          <van-field
              v-model="data.director"
              name="经办人"
              label="经办人"
              placeholder="经办人"
              left-icon="user-o"
              :rules="[{ required: true, message: '请填写经办人' }]"
              @click-right-icon="showDirector=true"
          >
            <template #right-icon>
              <van-button type="primary" size="small">选择</van-button>
            </template>
          </van-field>
          <van-field
              v-model="data.recordType"
              name="记录方式"
              label="记录方式"
              placeholder="记录方式"
              :rules="[{ required: true, message: '请填写记录方式' }]"
          >
            <template #input>
              <van-radio-group v-model="data.recordType" direction="horizontal">
                <van-radio name="记账">记账</van-radio>
                <van-radio name="未开票">未开票</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            {{ id != null ? '修改' : '提交' }}
          </van-button>
        </div>
      </van-form>
    </div>
    <div>
      <van-popup v-model:show="showDirector" round position="bottom">
        <van-picker
            :columns="directorColumn"
            @cancel="showDirector = false"
            @confirm="onDirectorsConfirm"
        />
      </van-popup>
    </div>


  </div>
</template>

<style scoped>

</style>